<!-- 公用VIDEO -->
<template>
  <div class="public-video">
    <video-player
      v-if="videoFlag"
      class="video-player vjs-custom-skin"
      ref="videoPlayer"
      :playsinline="true"
      :options="playerOptions"
      @play="onPlayerPlay($event)"
      @pause="onPlayerPause($event)"
      @ended="onPlayerEnded($event)"
      @waiting="onPlayerWaiting($event)"
      @playing="onPlayerPlaying($event)"
      @loadeddata="onPlayerLoadeddata($event)"
      @timeupdate="onPlayerTimeupdate($event)"
      @canplay="onPlayerCanplay($event)"
      @canplaythrough="onPlayerCanplaythrough($event)"
      @statechanged="playerStateChanged($event)"
      @ready="playerReadied"
    ></video-player>
    <div class="no-video" v-else>无视频连接</div>
    <!-- <video src="rtmp://58.200.131.2:1935/livetv/cctv1" style="width:200px;height:200px;"></video> -->
  </div>
</template>

<script>
import { videoPlayer } from "vue-video-player";
import { hls } from "videojs-contrib-hls";
import "vue-video-player/src/custom-theme.css";
import "video.js/dist/video-js.css";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { videoPlayer, hls },

  //父组件传入子组件数据
  props: {
    videoSrc: null,
  },

  //格式化数据
  filters: {},

  data() {
    //这里存放数据
    return {
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: true, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        // aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            // src: "https://www.apple.com.cn/105/media/cn/iphone-12/2020/7f5b7de7-9f8c-41eb-bf3b-f294773108e6/anim/hero/large.mp4", // 路径
            // src: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8", // 路径
            src: this.videoSrc,
            type: "application/x-mpegURL", // 类型
          },
        ],
        // techOrder: ['flash', 'html5'],// 兼容顺序
        // flash:{
        //       hls: { withCredentials: false },
        //   },
        poster: "", //你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: false,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: false, //全屏按钮
        },
      },
      videoFlag: true
    };
  },

  //计算属性 类似于data概念
  computed: {},

  //监控data中的数据变化
  watch: {},

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},

  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},

  //方法集合
  methods: {
    // 播放回调
    onPlayerPlay($event) {
      console.log("onPlayerPlay!", $event);
    },
    // 暂停回调
    onPlayerPause($event) {
      console.log("onPlayerPause!", $event);
    },
    // 视频播完回调
    onPlayerEnded($event) {
      console.log('onPlayerEnded',$event);
    },
    // DOM元素上的readyState更改导致播放停止
    onPlayerWaiting($event) {
      console.log('onPlayerWaiting',$event);
    },
    // 已开始播放回调
    onPlayerPlaying($event) {
      console.log('onPlayerPlaying',$event);
    },
    // 当播放器在当前播放位置下载数据时触发
    onPlayerLoadeddata($event) {
      console.log('onPlayerLoadeddata',$event);
    },
    // 当前播放位置发生变化时触发。
    onPlayerTimeupdate($event) {
      console.log('onPlayerTimeupdate',$event);
    },
    //媒体的readyState为HAVE_FUTURE_DATA或更高
    onPlayerCanplay(player) {
      console.log('onPlayerCanplay!', player)
    },
    //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
    onPlayerCanplaythrough(player) {
      console.log('player Canplaythrough!', player)
    },
    //播放状态改变回调
    playerStateChanged($event) {
      console.log("playerStateChanged", $event);
      if ($event.error) {
        console.log('播放视频出现错误');
        return this.videoFlag = false
      }
      this.videoFlag = true
    },
    //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
    playerReadied() {
      console.log("playerReadied");
    },
  },

  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped lang='less'>
/* 使用$符号可以标识一个变量;@import url(); 引入公共css类 */
.public-video {
  width: 100%;
  height: auto;
  background-color: rgba(0, 0, 0, 0);
  // display: flex;
  // justify-content: center;
  // align-items: center;
  .no-video {
    font-size: 0.24rem;
    color: #fff;
  }
}
</style>